<template>
	<view class="page_box">
		<uni-nav-bar left-icon="arrowthinleft" title="消息列表" :border="false" bg="bg-zhuse" color="#fff" @clickLeft="goBack()"></uni-nav-bar>
		<view class="padding-30">
			<view class="bg-fff radius10 margin-bottom-24 padding-x-30  flex align-center" v-for="(item, index) in list" :key="index">
				<view style="width: 10rpx;height: 10rpx;border-radius: 100%;"  v-if="item.is_read == 0" class="bg-zhuse margin-right-20"></view>
				<view class="padding-y-24" @tap="jump(`/pages/msg/msgCon2?id=${item.id}`)">
					<view class="fs-30 color-333 text-cut-2">{{item.title}}</view>
					<view class="fs-28 color-999  margin-top-10">{{item.create_time}}</view>
				</view>
			</view>				
		</view>
		<view class="nomore" :class="loadStatus" v-if="list.length"></view>
		<empty position="static" v-if="list.length < 1"></empty>
	</view>
</template>

<script>
export default {
	data() {
		return {
			q:{
				page:1,
				page_size:20
			},
			isLoading: true,
			hasMore: true,
			loadStatus: '',
			list: [],
		};
	},
	onLoad(opt) {
		
	},
	onShow() {
		this.q.page = 1;
		this.list = [];
		this.getList();
	},
	onReachBottom() {
		if(this.hasMore){
			this.q.page += 1;
			this.getList();
		}
	},
	methods: {
		getList() {
			this.isLoading = true;
			this.$api.pay_message(this.q).then(res => {
				this.isLoading = false;
				this.list = [...this.list, ...res.data.data];
				if (res.data.data.length != 0) {
					this.hasMore = true;
					this.loadStatus = '';
				} else {
					this.hasMore = false;
					this.loadStatus = 'over';
				}
				
			});
		}
	}
}
</script>

<style lang="scss">
page{
	background: #F7F7F7;
}
</style>
